<template>
	<div class="form-content">
		<div class="login-title">{{loginMode === 1 ? '员工' : '机构'}}登录</div>
		<div class="field-item">
			<van-field custom-style="font-size:30rpx" v-if="loginMode === 1" label="员工账号" :value="sAccount" center clearable placeholder="请输入员工账号" type="tel" @change="fieldChange($event, 'sAccount')"></van-field>
			<van-field  custom-style="font-size:30rpx" v-else label="机构账号" :value="oAccount" clearable center placeholder="请输入机构账号" type="tel" @change="fieldChange($event, 'oAccount')"></van-field>
		</div>
				
		<div v-if="loginMode === 1" class="field-item">
			<van-field custom-style="font-size:30rpx" :value="sPassword" label="密码" center clearable placeholder="请输入密码" :password="!eyePwd.staff" @change="fieldChange($event, 'sPassword')">
				<div slot="right-icon" class="right-icon-wrap">
					<div @click="eyePwd.staff = !eyePwd.staff" class="psd-show-btn" :class="{'eye-yes': eyePwd.staff, 'eye-no': !eyePwd.staff}" v-if="sPassword">
					</div>
				</div>
			</van-field>
		</div>
		<div v-else class="field-item">
			<van-field custom-style="font-size:30rpx" :value="oPassword" label="密码" center clearable placeholder="请输入密码" :password="!eyePwd.organization" @change="fieldChange($event, 'oPassword')">
				<div slot="right-icon" class="right-icon-wrap">
					<div @click="eyePwd.organization = !eyePwd.organization" class="psd-show-btn" :class="{'eye-yes': eyePwd.organization, 'eye-no': !eyePwd.organization}" v-if="oPassword">
					</div>
				</div>
			</van-field>
		</div>
				
		<div class="login-bottom-box">
			<div class="other-login">
				<span @click="swithLoginMode(loginMode)">{{loginMode === 1 ? '机构' : '员工'}}登录</span>
			</div>
			<div class="submit-btn" :class="btnEnabled ? 'enabled-submit-btn' : ''" @click="submitButtonClick">
				登录
			</div>
		</div>
	</div>
</template>
<script>
	import store from '../../store/index.js'
	export default {
		name: 'login',
		data() {
			return {
				loginMode: 1, // 1 - 员工登录  2 - 机构登录
				eyePwd: {
					staff: false,
					organization: false
				},
				sAccount: '',
				oAccount: '',
				sPassword: '',
				oPassword: '',
			}
		},
		onLoad() {
			this.clear();
			uni.setNavigationBarTitle({
			　　title: '登录'
			})
		},
		methods: {
			clear() {
				this.eyePwd.staff = false
				this.eyePwd.organization = false
				this.sPassword = ''
				this.oPassword = ''
				this.loginMode = this.$getQuery().loginMode && Number(this.$getQuery().loginMode) || 1
			},
			swithLoginMode(loginMode) {
				if (loginMode === 1) {
					this.loginMode = 2
					this.oPassword = ''
					this.eyePwd.organization = false
				}
				if (loginMode === 2) {
					this.loginMode = 1
					this.sPassword = ''
					this.eyePwd.staff = false
				}
			},

			fieldChange(e, type) {
				this[type] = e.detail
			},
			submitButtonClick() {
				this.checkForm().then(() => {
					const data = {
						username: '',
						password: '',
						campus_id: ''
					}
					if (this.loginMode === 1) {
						data.username = this.sAccount
						data.password = this.sPassword
						this.$http.employeeLogin(data).then(res => {
							// this.$goPage(2, this.$getStorage('myShare_perfectToUrl'));
							uni.navigateBack();
							this.$setStorage('myShare_userInfo', res.data.data);
							store.commit('initToken', res.data.data.token);
							this.$toast(res.data.message)
						})
					} else if (this.loginMode === 2) {
						data.username = this.oAccount;
						data.password = this.oPassword;
						this.$http.agencyLogin(data).then(res => {
							// this.$goPage(2, this.$getStorage('myShare_perfectToUrl'));
							uni.navigateBack();
							this.$setStorage('myShare_userInfo', res.data.data);
							store.commit('initToken', res.data.data.token);
							console.log(res.data);
							this.$toast(res.data.message);
						})
					}
				}).catch(err => {
					this.$toast(err)
				})
			},
			checkForm() {
				return new Promise((resolve, reject) => {
					if (this.loginMode === 1) {
						if (!this.sAccount) reject('请输入员工账号')
						if (!this.sPassword) reject('请输入密码')
					} else if (this.loginMode === 2) {
						if (!this.oAccount) reject('请输入机构账号')
						if (!this.oPassword) reject('请输入密码')
					}
					resolve()
				})
			},
		},
		computed: {
			btnEnabled: function() {
				if (this.loginMode === 1) {
					return this.sAccount && this.sPassword
				} else if (this.loginMode === 2) {
					return this.oAccount && this.oPassword
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.form-content {
		padding: 36rpx 32rpx;
		border-top: 1px solid #F1F1F1;
	}
	.login-title {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 38rpx;
		font-weight: 600;
		color: #212121;
		font-size: 38rpx;
		img {
			width: 24rpx;
			height: 48rpx;
			margin-right: 16rpx;
			vertical-align: middle;
		}
	}

	.field-item {
		margin-top: 40rpx;
		/deep/ input {
			height: 58rpx;
		}
			
		.van-cell {
			font-size: 30rpx;
		}

		.right-icon-wrap {
			padding: 0 16rpx;

			.psd-show-btn {
				width: 40rpx;
				height: 40rpx;

				&.eye-yes {
					background: url('https://web-data.zmlearn.com/image/bgmhR3qLoWSt8BSnBMNkth/icon_eye_yes.png') no-repeat;
					background-size: 100%;
				}

				&.eye-no {
					background: url('https://web-data.zmlearn.com/image/e2xyXQ7PGAqsbfWJZua6a4/icon_eye_no.png') no-repeat;
					background-size: 100%;
				}
			}
		}
	}

	.login-bottom-box {
		margin-top: 60rpx;

		.submit-btn {
			width: 620rpx;
			height: 88rpx;
			line-height: 88rpx;
			margin: 40rpx auto;
			border-radius: 44rpx;
			font-size: 36rpx;
			color: #fff;
			background: #96D9FD;
			text-align: center;
			font-size: 28rpx;
		}

		.enabled-submit-btn {
			background: linear-gradient(to bottom, #21AAFB, #17A1F2);
		}

		.other-login {
			margin: 28rpx auto 40rpx;
			font-size: 28rpx;
			color: #21AAFB;
			text-align: right;
		}
	}
</style>
